<script lang="ts" setup>
import { computed } from 'vue'
import { routes } from '../../router'
import { useRoute } from 'vue-router'
import { ExtendedRouteRecordRaw } from '../../utils/types';

const props = defineProps<{
  item: ExtendedRouteRecordRaw
}>()

const firstLink = computed(() => {
  return routes
    .map(r => r.path)
    .find(s => {
      return !/\/?:\w/.test(s) && s.includes(props.item.path)
    })
})

const route = useRoute()

const isActive = computed(() => {
  return route.fullPath.startsWith(props.item.path)
})

const itemIcon = computed(() => {
  const { icon, activeIcon } = props.item.meta
  return (isActive.value && activeIcon) || icon
})

const cls = 'ui-menu-item'
</script>

<template>
  <RouterLink :class="[cls, { 'is-active': isActive }]" :to="firstLink">
    <ElMenuItem :index="item.path">
      <img :class="`${cls}_icon`" :src="itemIcon">
      {{ item.meta.title }}
    </ElMenuItem>
  </RouterLink>
</template>

<style lang="scss">
.ui-menu-item {
  text-decoration: none;
  color: #C8C9CC;
  &.is-active {
    color: #000;
    .el-menu-item {
      background-color: #fff;
    }
  }
  .el-menu-item {
    color: inherit;
  }
  &_icon {
    width: 16px;
    margin-right: 9px;
  }
}
</style>
